<template>
  <div class="changeSeats">
    <!-- 更换坐席弹窗 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="closeDailog"
      :show-close="false"
      center
    >
      <FormContainer :column="1">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
          <!-- <el-form-item label="原执行坐席">
            <el-select
              v-model="curData.oldSeats"
              placeholder="请选择原执行坐席"
              disabled
              clearable
              filterable
            >
              <el-option label="张三" value="0" />
              <el-option label="李四" value="1" />
              <el-option label="王五" value="2" />
            </el-select>
          </el-form-item> -->
          <el-form-item prop="newSeats" label="限制性坐席">
            <el-select v-model="formData.newSeats" placeholder="请选择限制性坐席" clearable filterable>
              <el-option label="张三" value="0" />
              <el-option label="李四" value="1" />
              <el-option label="王五" value="2" />
            </el-select>
          </el-form-item>
        </el-form>
      </FormContainer>
      <span slot="footer" class="dialog-footer">
        <Button @click="dialogVisible=false">取消</Button>
        <Button type="primary" :loading="loading" @click="confrim">确定</Button>
      </span>
    </el-dialog>
    <Button type="primary" @click="openDailog">{{ text }}</Button>
  </div>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
export default {
  name: 'ChangeSeats',
  components: {
    FormContainer,
    Button
  },
  props: {
    curData: {
      // 当前选中任务数据
      type: Object,
      default: () => {
        return null
      }
    },
    text: {
      type: String,
      default: '更换坐席'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      formData: {},
      formRules: {
        newSeats: {
          required: true,
          message: '请选择限制性坐席',
          trigger: 'change'
        }
      }
    }
  },
  methods: {
    openDailog() {
      if (this.curData) {
        this.dialogVisible = true
      } else {
        this.$message.info('请先选择一条要更换坐席的数据')
      }
    },
    closeDailog() {
      this.$refs.form.resetFields()
      this.dialogVisible = false
    },
    // 坐席更换确认
    confrim() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('confrim', this.formData)
          this.closeDailog()
        }
      })
    }
  }
}
</script>
<style lang='scss' module>
</style>
